<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>map</title>
    <link rel="icon" type="image/x-icon" href="./favicon.ico" />
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }

        html {
            height: 100%
        }

        body {
            height: 100%;
            margin: 0px;
            padding: 0px
        }

        #container {
            height: 100%
        }

        .tradeArea {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 120px;
            z-index: 99999;
            background-color: #fff;
        }

        .tradeArea a {
            display: block;
            width: 100%;
            height: 60px;
            text-align: center;
            line-height: 60px;
            color: #fff;
            background-color: #f5445d;
            border: 0;
        }

        .tradeArea p {
            height: 60px;
        }
    </style>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=18ukXzuN3OGZPdD77dM0dDdyS5fl7cVB">
        //v2.0版本的引用方式：src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"
    </script>
</head>

<body>
    <div id="container"></div>
    <div class="tradeArea">
        <p></p>
        <a></a>
    </div>
</body>
<script src="./jquery1.7.2.js"></script>
<script type="text/javascript">
    // 创建地图实例
    var map = new BMap.Map("container");
    var length = 0;
    var marker = [],
        circle = [];
    $.ajax({
        type: "GET",
        url: "http://cfb-t.scsj.net.cn/h/index/allPoint",
        dataType: "json",
        async: false,
        success: function (data) {
            // console.log(data.data);
            sessionStorage.setItem("mapJson", JSON.stringify(data.data));
            var data = data.data;
            length = $(data).length;
            $(data).each(function (i, v) {
                var lng = v.longitude;
                var lat = v.latitude;
                var name = v.name;
                var radius = v.radius;
                // 初始化地图，设置中心点坐标和地图级别
                var pointi = new BMap.Point(lng, lat);
                // 创建点坐标  
                map.centerAndZoom(pointi, 12);
                markeri = new BMap.Marker(pointi);
                map.addOverlay(markeri);
                // 自定义图标
                // 创建图标对象
                // var myIcon = new BMap.Icon("map.png", new BMap.Size(72, 72), {
                //     anchor: new BMap.Size(72, 72),
                //     // 设置图片偏移。       
                //     imageOffset: new BMap.Size(0,0) 
                //     // 设置图片偏移    
                // });
                // 创建标注对象并添加到地图
                // markeri = new BMap.Marker(pointi, {
                //     icon: myIcon
                // });
                // map.addOverlay(markeri);

                // 添加地图覆盖物 
                var circlei = new BMap.Circle(pointi, radius, {
                    fillColor: "#7EA3CA",
                    strokeWeight: 1,
                    fillOpacity: 0.5,
                    strokeOpacity: 0.5,
                    enableEditing: false
                });
                map.addOverlay(circlei);
                var html = "<div index=" + i + " id='" + v.id + "'>" +
                    "<p class='name'>" + name + "</p>" +
                    "</div>";
                var infoWindow = new BMap.InfoWindow(html);
                //创建窗口信息
                markeri.infoWindow = infoWindow;
                // marker.openInfoWindow(infoWindow);
                //给当前标注新增一个属性以便保存窗口信息infoWindow
                marker.push(markeri);
                circle.push(circlei);
            })
        },
        error: function () {
            console.log("错误");
        }
    });

    $(marker).each(function (i, v) {
        console.log($(v)[0]);
        // $(v).click(function () {
        //     console.log(1);
        // })
        v.addEventListener("click", function (e) {
            var name = $(e.target.infoWindow.content).find(".name").text();
            var id = $(e.target.infoWindow.content).attr("id");
            //添加标注的点击事件回调
            if (id == 1 || id == 4) {
                alert("您来晚了，该商圈已被别的小伙伴认购啦");
                return;
            } else {
                // 其他都边为未选中颜色
                for (var j = 0; j < circle.length; j++) {
                    circle[j].z.fillColor = "#7EA3CA";
                    map.addOverlay(circle[j]);
                }
                // 当前覆盖物变色
                circle[i].z.fillColor = "#f5445d";
                map.addOverlay(circle[i]);
                // 显示对应名称
                $(".tradeArea p").text(name);
                $(".tradeArea a").attr("href","./choice.html?id="+id+"&tradeArea="+name);
            }
            // console.log($(e.target.infoWindow.content).find(".name").text());
            // console.log($(e.target.infoWindow.content).find(".province").text());
            // console.log($(e.target.infoWindow.content).find(".city").text());
            // console.log($(e.target.infoWindow.content).find(".area").text());
            // console.log($(e.target.infoWindow.content).attr("index"));
            // console.log($(e.target.infoWindow.content).attr("id"));
        });
    })

    map.addControl(new BMap.NavigationControl({
        // 靠左上角位置  
        anchor: BMAP_ANCHOR_TOP_LEFT,
        // LARGE类型  
        type: BMAP_NAVIGATION_CONTROL_LARGE,
        // 启用显示定位  
        enableGeolocation: true
    }));
    // 添加带有定位的导航控件
    // map.addControl(new BMap.ScaleControl());
    // map.addControl(new BMap.OverviewMapControl());
    // map.addControl(new BMap.MapTypeControl());
    map.setCurrentCity("郑州");
</script>

</html>